<template>
  <div class="recharge">
    <div class="recharge-top">
      <div class="top-main">
        <div class="title">贷款余额</div>
        <div class="price">¥0.00</div>
      </div>
    </div>
    <div class="recharge-desc">请选择充值金额</div>
    <div class="price-card">
      <div
        class="card-item"
        v-for="(item, index) in priceCardList"
        :key="item.id"
        :class="currentIndex == index ? 'card-item-active' : ''"
        @click="cardClick(index)"
      >
        <div class="card-main">
          <p class="price">{{ item.price }} <span>元</span></p>
          <div class="card-desc">{{ item.desc }}</div>
        </div>
      </div>
    </div>
    <div class="card-bottom">
      <div class="card-bottom-main">
        <p>自定义充值金额</p>
        <div class="card-price">
          <van-field v-model="value" placeholder="¥1000" />
        </div>
      </div>
    </div>
    <div class="pay-us">立即充值</div>
  </div>
</template>

<script>
export default {
  name: 'recharge',
  data() {
    return {
      priceCardList: [
        {
          id: 1,
          price: '500',
          desc: '价值1666元',
        },
        {
          id: 2,
          price: '1000',
          desc: '价值3333元',
        },
        {
          id: 3,
          price: '10000',
          desc: '价值33333元',
        },
      ],
      currentIndex: 0,
      value: '', // 支付金额
    }
  },
  methods: {
    cardClick(index) {
      this.currentIndex = index
    },
  },
  computed: {
    valueFilter() {
      if (this.value) {
        return '¥' + this.value
      } else {
        return ''
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.recharge {
  font-size: 14px;
  color: #fff;
  overflow: hidden;
}
.recharge-top {
  height: 130px;
  background: url('~@/assets/recharge.png') no-repeat center;
  background-size: 350px;
  position: relative;
  .top-main {
    position: absolute;
    left: 52px;
    top: 28px;
    .price {
      font-size: 30px;
    }
  }
}
.recharge-desc {
  padding: 0 12px;
  color: #1f0d44;
  font-size: 16px;
  font-weight: 600;
}
.price-card {
  margin: 12px;
  display: flex;
  justify-content: space-between;
  .card-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 110px;
    height: 80px;
    border: 1px solid #f1f0f5;
    border-radius: 8px;
    color: #665e75;
    .price {
      font-size: 20px;
      span {
        font-size: 14px;
      }
    }
    .card-desc {
      color: #afabb7;
      font-size: 12px;
    }
  }
  .card-item-active {
    background: rgba(34, 136, 255, 0.1);
    box-shadow: 0px 4px 12px 0px rgba(31, 13, 68, 0.04);
    border-radius: 8px;
    border: 1px solid #2288ff;
    color: #2288ff;
  }
}
.pay-us {
  //width: 351px;
  position: absolute;
  left: 12px;
  bottom: 44px;
  width: 351px;
  height: 40px;
  background: linear-gradient(135deg, #2389ff 0%, #1852f9 100%);
  box-shadow: 0px 4px 12px 0px rgba(31, 13, 68, 0.04);
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
}
.card-bottom {
  margin: 0 12px;
  height: 107px;
  background: #ffffff;
  box-shadow: 0px 4px 12px 0px rgba(31, 13, 68, 0.04);
  border-radius: 8px;
  border: 1px solid #f1f0f5;
  color: #1f0d44;
  padding: 16px 20px;
  font-weight: 600;
}
::v-deep .van-cell {
  margin-top: 13px;
  padding: 0;
  border-bottom: 1px solid #f7f6fb;
}
::v-deep .van-cell__value {
  height: 30px;
}
::v-deep .van-field__control {
  color: #2288ff;
}
.top-main {
}
</style>